<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>财务数据分析</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/css/public.css" rel="stylesheet" type="text/css"/>
    <style>
        #myTab{
            margin-right: 100px;
        }
        #myTab li{
            float: right;
            margin-left: 20px;
        }
        #myTab li:nth-of-type(2){
            border-bottom: 2px solid #3398DB;
        }
        #myTab li:nth-of-type(1){
            margin-right: 100px;
        }
    </style>
    <script src="__PUBLIC__/js/echarts.common.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
<div class="layui-conter" style="height: 100%">
    <div class="layui-col-md12" style="height: 100%">
        <div class="navigation" >
            <span>数据></span><span>数据分析></span><span>财务数据分析</span>
        </div>

        <div class="white-conter" style="height: 90%" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="title-blue"><b>所有校区收入汇总</b></div>
                </div>
            </div>
            <div class="layui-card-body" style="margin-left: 30%">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <div class=" layui-row" style="margin-top: 20px">
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">数据来源：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz2">
                                    <option value="" selected="">充值单</option>
                                    <option value="1" >充值单</option>
                                    <option value="2">充值单</option>
                                </select>
                            </div>
                        </div>
                        <div class=" layui-col-xs3" style="width: 20%;">
                            <label class="layui-form-label">校区选择：</label>
                            <div class="layui-input-inline" style="width: 120px;">
                                <select name="quiz3">
                                    <option value="" selected="">全部校区</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <ul id="myTab" class="nav nav-tabs" style="height: 80%;">
                <li class="active">
                    <a href="#chart1" data-toggle="tab">每年</a>
                </li>
                <li>
                    <a href="#container" data-toggle="tab" onclick="javascript:chartresize()" style="color:#3398DB;">本月</a>
                </li>
                <li>
                    <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">今日</a>
                </li>
                <div class="tab-content" style="height: 100%;">
                    <div class="tab-pane fade in active" id="chart1" ></div>
                    <div class="tab-pane fade" id="container" style="height: 100%;"></div>
                    <div class="tab-pane fade in active" id="chart1"></div>
                </div>
            </ul>
        </div>

    </div>
</div>
</body>
<script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};   
option = null;
app.title = '坐标轴刻度与标签对齐';

option = {
    color: ['#3398DB'],
    textStyle:{
        color:["#666"]
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            axisLine:{
                show:false
            },
            type : 'category',
            data : ['CXJ', 'PJS', 'PTC', 'ZSY', 'YKJ', 'YXJ', 'MQB','MBJ','MPJ','MWD','MBL','MH','BDH','BWD','BBL','BSN','JAT','JYT','PDS','PDC','PDW','PDZ','PDH','SKC','SKY','SFH','QFS','FNQ'],
            axisTick: {
                alignWithLabel: true,
            }
        }
    ],
    yAxis : [
        {   
            type:'value',
            data:['0','5','10','15','20','25','30'],
            name:'（万元）',
            nameTextStyle:{
                fontSize:16,  
                padding:10
            },
            axisLine:{
                show:false
            }
        }
    ],
    series : [
        {
            name:'直接访问',
            type:'bar',
            barWidth: '15%',
            data:[1, 5.2, 20, 23, 29, 23, 22, 1, 5.2, 20, 23.4, 29, 23, 22, 1, 5.2, 20, 23.4, 29, 23, 22, 1, 5.2, 20, 23.4, 29, 23, 22]
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>
<script src="__PUBLIC__/js/layui.all.js"></script>
</html>